<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>document</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="1.js"></script>
    <script>
        function showAction($obj) {
            for(var i = 0; i < $obj.length; i++){
                $obj.eq(i).mouseenter(function () {
                    $(this).find(".mod_slide_action").find("a").animate({
                        "opacity": "1",
                    }, 200);
                });
                $obj.eq(i).mouseleave(function () {
                    $(this).find(".mod_slide_action").find("a").animate({
                        "opacity": "0"
                    }, 200);
                });
            }
        }

        function current(obj,index) {
            for(var i = 0; i < obj.length; i++){
                obj.eq(i).removeClass("current"); 
            }
            obj.eq(index).addClass("current");
        }

        $(function () {
            //设置title属性
            getTitle($(".topnav li>a"));

            //客户端 弹出框设置
            $(".topnav li").eq(2).mouseenter(function () {
                //弹出框小标签设置
                var $icon = $(".privilege-icon");
                for (var i = 0; i < $icon.length; i++){
                    $icon.eq(i).css("background-position-y", "-" + i * 30 + "px");
                }

                $(this).children("div").show();
            });
            $(".topnav li").eq(2).mouseleave(function () {
                $(this).children("div").hide();
            });

            //显示左右按键
            showAction($(".j_mod"));


            var gdtjindex = 0;
            //左右转换
            $(".gdtj .slide_action_left a").click(function () {
                var $slideList = $(this).parent().parent().parent().find(".slide_list");
                var w = $slideList.parent().width();
                var obj = $slideList.position();
                var left = obj.left + w;
                gdtjindex--;
                $slideList.animate({
                    "left": left + "px",
                }, 500, function () {
                    // console.log(gdtjindex);
                    if (gdtjindex <= -1){
                        gdtjindex = 1;
                        $slideList.css({
                            "left": "-200%"
                        });
                    }
                });
                // console.log((gdtjindex+2)%2);
                current( $(this).parent().parent().parent().find(".slide_switch").find("i"), (gdtjindex+2)%2);
            });

            $(".gdtj .slide_action_right a").click(function () {
                var $slideList = $(this).parent().parent().parent().find(".slide_list");
                var w = $slideList.parent().width();
                var obj = $slideList.position();
                var left = obj.left - w;
                gdtjindex++;
                $slideList.animate({
                    "left": left + "px",
                }, 500, function () {
                    // console.log(left);
                    // console.log(w);
                    if (gdtjindex >= 2){
                        gdtjindex = 0;
                        $slideList.css({
                            "left": "-100%"
                        });
                    }
                });
                // console.log((gdtjindex+2)%2);
                current( $(this).parent().parent().parent().find(".slide_switch").find("i"), (gdtjindex+2)%2);
            });

            var sw = $(".gdtj .slide_switch a");
            sw.click(function () {
                var $slideList = $(this).parent().parent().find(".slide_list");
                gdtjindex = $(this).index();
                // console.log(gdtjindex);
                $slideList.animate({
                    "left": "-" + (gdtjindex+1)*100 + "%",
                }, 500);
                // console.log($(this).parent().find("i"));
                current($(this).parent().find("i"), gdtjindex);
            });
            
            
            $(".playlist_img").mouseenter(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0.3"
                });
                $(this).find("i").eq(1).animate({
                    "opacity": "1",
                    "background-size": "100%"
                },500);
            });
            $(".playlist_img").mouseleave(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0"
                });
                $(this).find("i").eq(1).css({
                    "background-size": "68%"
                }).animate({
                    "opacity": "0",
                    "background-size": "0"
                },500);
            });
            $(".songlist_item_box a").mouseenter(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0.3"
                });
                $(this).find("i").eq(1).animate({
                    "opacity": "1",
                    "background-size": "68%"
                },500);
            });
            $(".songlist_item_box a").mouseleave(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0"
                });
                $(this).find("i").eq(1).css({
                    "background-size": "68%"
                }).animate({
                    "opacity": "0",
                    "background-size": "0"
                },500);
            });
            $(".playlist_mv a").mouseenter(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0.3"
                });
                $(this).find("i").eq(1).animate({
                    "opacity": "1",
                    "background-size": "68%"
                },500);
            });
            $(".playlist_mv a").mouseleave(function () {
                $(this).find("i").eq(0).animate({
                   "opacity": "0"
                });
                $(this).find("i").eq(1).animate({
                    "opacity": "0",
                    "background-size": "0"
                },500);
            });
            $(".toplist_box").mouseenter(function () {
                $(this).find("i").eq(1).hide();
                $(this).find("i").eq(0).animate({
                    "opacity": "1",
                    "background-size": "72%"
                },500);
            });
            $(".toplist_box").mouseleave(function () {
                $(this).find("i").eq(1).show();
                $(this).find("i").eq(0).animate({
                    "opacity": "0",
                    "background-size": "0"
                },300);
            });
        })
    </script>
</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="header-logo">
                <a href="">
                    <img src="images/logo.png" alt="QQ音乐">
                </a>
            </div>
            <ul class="topnav">
                <li class="current"><a href="">音乐馆</a></li>
                <li><a href="">我的音乐</a></li>
                <li>
                    <a href="">客户端</a>
                    <img src="images/mark_1.png" alt="">
                    <div class="privilege">
                        <div class="privilege-in">
                            <p><i class="privilege-icon"></i>HQ高品质 全员开启</p>
                            <p><i class="privilege-icon"></i>独家音效 全面升级</p>
                            <p><i class="privilege-icon"></i>轻盈视觉 动态皮肤</p>
                            <a href="#">下载体验</a>
                        </div>
                    </div>
                </li>
                <li><a href="">音乐号</a></li>
                <li><a href="">VIP</a></li>
            </ul>

            <div class="header-search">
                <div class="search-show">
                    <input type="text" placeholder="搜索音乐、MV、歌单、用户">
                    <button></button>
                </div>
                <div class="j_smartbox">
                    <div class="search_other">
                        <div class="search_hot">
                            <dl>
                                <dt>热门搜索</dt>
                                <dd>
                                    <a href="">
                                        <span class="number">1</span>
                                        <span class="name">攀登</span>
                                        <span class="listen">38.2万</span>
                                    </a>
                                    <a href="">
                                        <span class="number">2</span>
                                        <span class="name">薛之谦</span>
                                        <span class="listen">37.2万</span>
                                    </a>
                                    <a href="">
                                        <span class="number">3</span>
                                        <span class="name">最远的你是我最近的爱</span>
                                        <span class="listen">31.7万</span>
                                    </a>
                                    <a href="">
                                        <span class="number">4</span>
                                        <span>亲爱的，热爱的</span>
                                        <span class="listen">20.4万</span>
                                    </a>
                                    <a href="">
                                        <span class="number">5</span>
                                        <span class="name">慢半拍</span>
                                        <span class="listen">19.8万</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>
                        <div class="search_history">
                            <dl>
                                <dt>搜索历史
                                    <a href="javascript:;">
                                        <span>清空</span>
                                        <i></i>
                                    </a>
                                </dt>
                                <dd>
                                    <a href="" class="link">搜索</a>
                                    <a href="javascript:;" class="delete">
                                        <i></i>
                                        <span>删除</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                $(function () {
                    //显示热搜框
                    $(".header-search input").focus(function () {
                        $(".search_other").slideDown(300);
                    });
                    $(".header-search input").blur(function () {
                        $(".search_other").slideUp(300);
                    });

                    //
                    $(".search_history dd").mouseenter(function () {
                        $(this).find(".delete").show();
                        $(this).css("background-color", "#31c27c")
                                .find(".link").css("color","#fff");
                    });
                    $(".search_history dd").mouseleave(function () {
                        $(this).find(".delete").hide();
                        $(this).css("background-color", "#fff")
                                .find(".link").css("color","#000");
                    });
                    // $(".delete i").click(function () {
                    //     alert("d");
                    //     $(this).parent().remove();
                    // });

                    $(".search-show button").click(function () {                       
                        var txt = $(this).prev().val();
                        if(txt == "") return;

                        var html = "<dd>"
                                    +   '<a href="" class="link">' + txt + '</a>'
                                    +   '<a href="javascript:;" class="delete">'
                                    +       "<i></i>"
                                    +       "<span>删除</span>"   
                                    +   "</a>"
                                    +"</dd>"
                        $(this).parent().parent().find(".search_history").find("dt").after(html);
                        $(this).prev().val("");
                    });
                });
            </script>
            <div class="header-opt">
                <!-- 未登录 -->
                <div class="login"><a href="">登录</a></div>
                <div class="lvzuan"><a href="">开通绿钻豪华版</a></div>
                <div class="fufeibao"><a href="">开通付费包</a></div>
            </div>

            <ul class="nav">
                <li class="current"><a href="">首页</a></li>
                <li><a href="">歌手</a></li>
                <li><a href="">新碟</a></li>
                <li><a href="">排行榜</a></li>
                <li><a href="">分类歌单</a></li>
                <li><a href="">电台</a></li>
                <li><a href="">MV</a></li>
                <li><a href="">数字专辑</a></li>
                <li><a href="">票务</a></li>
            </ul>
        </div>
    </div>

    <!-- 歌单推荐 -->
    <div class="gdtj j_mod">
        <div class="inner">
            <div class="mod-t">
                <h2>歌单推荐</h2>
            </div>
            <!-- 切换 -->
            <div class="mod-tab">
                <a class="current" href="">为你推荐</a>
                <a href="">网络歌曲</a>
                <a href="">节奏控</a>
                <a href="">夜店</a>
                <a href="">官方歌单</a>
                <a href="">情歌</a>
            </div>

            <div class="mod_slide" id="j_slide">
                <ul class="slide_list">
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jfif" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔6</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">我也曾难过，但我没敢说7</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔8</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔9</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔10</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔1</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300 (1).jfif" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">我也曾难过，但我没敢说2</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔3</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔4</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                        <div class="playlist_item_box">
                            <div class="playlist_img">
                                <a  href="">
                                    <img src="images/300.jpg" />
                                    <i class="mark"></i>
                                    <i class="mark_icon_play"></i>
                                </a>
                            </div>
                            <h4>
                                <span><a href="">华语女声：深夜里的那丝温柔5</a></span>
                            </h4>
                            <div class="playlist_other">
                                播放量：20.8万
                            </div>
                        </div>
                    </li>
                    <li class="playlist_item" >
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a  href="">
                                        <img src="images/300.jfif" />
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">华语女声：深夜里的那丝温柔6</a></span>
                                </h4>
                                <div class="playlist_other">
                                    播放量：20.8万
                                </div>
                            </div>
                        </li>
                        <li class="playlist_item" >
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a  href="">
                                        <img src="images/300.jpg" />
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">我也曾难过，但我没敢说7</a></span>
                                </h4>
                                <div class="playlist_other">
                                    播放量：20.8万
                                </div>
                            </div>
                        </li>
                        <li class="playlist_item" >
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a  href="">
                                        <img src="images/300.jpg" />
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">华语女声：深夜里的那丝温柔8</a></span>
                                </h4>
                                <div class="playlist_other">
                                    播放量：20.8万
                                </div>
                            </div>
                        </li>
                        <li class="playlist_item" >
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a  href="">
                                        <img src="images/300.jpg" />
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">华语女声：深夜里的那丝温柔9</a></span>
                                </h4>
                                <div class="playlist_other">
                                    播放量：20.8万
                                </div>
                            </div>
                        </li>
                        <li class="playlist_item" >
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a  href="">
                                        <img src="images/300.jpg" />
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">华语女声：深夜里的那丝温柔10</a></span>
                                </h4>
                                <div class="playlist_other">
                                    播放量：20.8万
                                </div>
                            </div>
                        </li>
                        <li class="playlist_item" >
                                <div class="playlist_item_box">
                                    <div class="playlist_img">
                                        <a  href="">
                                            <img src="images/300.jpg" />
                                            <i class="mark"></i>
                                            <i class="mark_icon_play"></i>
                                        </a>
                                    </div>
                                    <h4>
                                        <span><a href="">华语女声：深夜里的那丝温柔1</a></span>
                                    </h4>
                                    <div class="playlist_other">
                                        播放量：20.8万
                                    </div>
                                </div>
                            </li>
                            <li class="playlist_item" >
                                <div class="playlist_item_box">
                                    <div class="playlist_img">
                                        <a  href="">
                                            <img src="images/300 (1).jfif" />
                                            <i class="mark"></i>
                                            <i class="mark_icon_play"></i>
                                        </a>
                                    </div>
                                    <h4>
                                        <span><a href="">我也曾难过，但我没敢说2</a></span>
                                    </h4>
                                    <div class="playlist_other">
                                        播放量：20.8万
                                    </div>
                                </div>
                            </li>
                            <li class="playlist_item" >
                                <div class="playlist_item_box">
                                    <div class="playlist_img">
                                        <a  href="">
                                            <img src="images/300.jpg" />
                                            <i class="mark"></i>
                                            <i class="mark_icon_play"></i>
                                        </a>
                                    </div>
                                    <h4>
                                        <span><a href="">华语女声：深夜里的那丝温柔3</a></span>
                                    </h4>
                                    <div class="playlist_other">
                                        播放量：20.8万
                                    </div>
                                </div>
                            </li>
                            <li class="playlist_item" >
                                <div class="playlist_item_box">
                                    <div class="playlist_img">
                                        <a  href="">
                                            <img src="images/300.jpg" />
                                            <i class="mark"></i>
                                            <i class="mark_icon_play"></i>
                                        </a>
                                    </div>
                                    <h4>
                                        <span><a href="">华语女声：深夜里的那丝温柔4</a></span>
                                    </h4>
                                    <div class="playlist_other">
                                        播放量：20.8万
                                    </div>
                                </div>
                            </li>
                            <li class="playlist_item" >
                                <div class="playlist_item_box">
                                    <div class="playlist_img">
                                        <a  href="">
                                            <img src="images/300.jpg" />
                                            <i class="mark"></i>
                                            <i class="mark_icon_play"></i>
                                        </a>
                                    </div>
                                    <h4>
                                        <span><a href="">华语女声：深夜里的那丝温柔5</a></span>
                                    </h4>
                                    <div class="playlist_other">
                                        播放量：20.8万
                                    </div>
                                </div>
                            </li>
                </ul>
            </div>
            <div class="slide_switch">
                <a href="javascript:;">
                    <i class="current"></i>
                </a>
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>

        <div class="mod_slide_action">
            <div class="slide_action_left">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
            <div class="slide_action_right">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 新歌首发 -->
    <div class="xgsf j_mod">
        <div class="inner">
            <div class="mod-t">
                <h2>新歌首发</h2>
            </div>

            <a href="" class="mod_btn"><i class="mod_btn_icon_play"></i>播放全部</a>
            <!-- 切换 -->
            <div class="mod-tab">
                <a class="current" href="">最新</a>     
                <a href="">内地</a>
                <a href="">港台</a>
                <a href="">欧美</a>
                <a href="">韩国</a>
                <a href="">日本</a>
            </div>

            <div class="mod_slide">
                <div class="slide_list">
                    <ul><!-- class="songlist_list" -->
                        <li><!-- class="songlist_item" -->
                            <div class="songlist_item_box">
                                <a href="">
                                    <img class="songlist__pic" src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist__time c_tx_thin"></div>
                            </div>
                        </li>
                    </ul>

                    <ul><!-- class="songlist_list" -->
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                        <li>
                            <div class="songlist_item_box">
                                <a href="">
                                    <img src="images/T002R90x90M000000DMpJ73yeITP.jpg">
                                    <i class="mod_cover_mask"></i>
                                    <i class="mod_cover_icon_play"></i>
                                </a>
                                <div class="songlist_cont">
                                    <h3><a href="">慢半拍</a></h3>
                                    <p class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </p>
                                </div>
                                <div class="songlist_time">03:28</div>
                            </div>
                        </li>
                    </ul>

                   
                </div>
            </div>

            <div class="slide_switch">
                <a href="javascript:;">
                    <i class="current"></i>
                </a>
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
        
        <div class="mod_slide_action">
            <div class="slide_action_left">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
            <div class="slide_action_right">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 精彩推荐 -->
    <div class="jctj j_mod">
        <div class="inner">
            <div class="mod-t">
                <h2>精彩推荐</h2>
            </div>

            <div class="mod_slide">
                <ul>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/1578310.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>

            <div class="slide_switch">
                <a href="javascript:;">
                    <i class="current"></i>
                </a>
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>

        <div class="mod_slide_action">
            <div class="slide_action_left">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
            <div class="slide_action_right">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 新碟首发 -->
    <div class="xdsf">
        <div class="inner">
            <div class="mod-t">
                <h2>新碟首发</h2>
            </div>

            <a href="" class="index_more">更多<i></i></a>

            <!-- 切换 -->
            <div class="mod-tab">
                <a class="current" href="">内地</a>     
                <a href="">港台</a>
                <a href="">欧美</a>
                <a href="">韩国</a>
                <a href="">日本</a>
                <a href="">其他</a>
            </div>


            <div class="mod_slide">
                <div class="slide_list">
                    <ul>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_img">
                                    <a href="">
                                        <img src="images/T002R300x300M0000004lrIw42DHKa.jpg">
                                        <i class="mark"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                </div>
                                <h4>
                                    <span><a href="">反正我一定过得比你好</a></span>
                                </h4>
                                <div class="playlist_author">
                                    <a href="">刘至佳</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- 排行榜 -->
    <div class="phb">
        <div class="inner">
            <div class="mod-t">
                <h2>新碟首发</h2>
            </div>
            
            <a href="" class="index_more">更多<i></i></a>
            
            <div class="mod_toplist">
                <ul>
                    <li class="item1">
                        <div class="toplist_box">
                            <div class="toplist_bg"></div>
                            <i class="mod_icon_play"></i>
                            <i class="toplist_line"></i>
                            <h3>
                                <i></i>
                                <a href="">流行指数</a>
                            </h3>
                            <ol>
                                <li class="toplist_song">
                                    <div class="toplist_number">1</div>
                                    <div class="toplist_songname">
                                        <a href="">慢半拍</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">薛之谦</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">2</div>
                                    <div class="toplist_songname">
                                        <a href="">我的朋友</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">TFBOYS</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">3</div>
                                    <div class="toplist_songname">
                                        <a href="">bad&nbsp;guy</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">Billie&#32;Eilish&#47;Justin&#32;Bieber</a>
                                    </div>
                                </li>                    
                            </ol>
                        </div>
                    </li>
                    <li class="item2">
                        <div class="toplist_box">
                            <div class="toplist_bg"></div>
                            <i class="mod_icon_play"></i>
                            <i class="toplist_line"></i>
                            <h3>
                                <i></i>
                                <a href="">流行指数</a>
                            </h3>
                            <ol>
                                <li class="toplist_song">
                                    <div class="toplist_number">1</div>
                                    <div class="toplist_songname">
                                        <a href="">慢半拍</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">薛之谦</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">2</div>
                                    <div class="toplist_songname">
                                        <a href="">我的朋友</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">TFBOYS</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">3</div>
                                    <div class="toplist_songname">
                                        <a href="">bad&nbsp;guy</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">Billie&#32;Eilish&#47;Justin&#32;Bieber</a>
                                    </div>
                                </li>                    
                            </ol>
                        </div>
                    </li>
                    <li class="item3">
                        <div class="toplist_box">
                            <div class="toplist_bg"></div>
                            <i class="mod_icon_play"></i>
                            <i class="toplist_line"></i>
                            <h3>
                                <i></i>
                                <a href="">流行指数</a>
                            </h3>
                            <ol>
                                <li class="toplist_song">
                                    <div class="toplist_number">1</div>
                                    <div class="toplist_songname">
                                        <a href="">慢半拍</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">薛之谦</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">2</div>
                                    <div class="toplist_songname">
                                        <a href="">我的朋友</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">TFBOYS</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">3</div>
                                    <div class="toplist_songname">
                                        <a href="">bad&nbsp;guy</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">Billie&#32;Eilish&#47;Justin&#32;Bieber</a>
                                    </div>
                                </li>                    
                            </ol>
                        </div>
                    </li>
                    <li class="item4">
                        <div class="toplist_box">
                            <div class="toplist_bg"></div>
                            <i class="mod_icon_play"></i>
                            <i class="toplist_line"></i>
                            <h3>
                                <i></i>
                                <a href="">流行指数</a>
                            </h3>
                            <ol>
                                <li class="toplist_song">
                                    <div class="toplist_number">1</div>
                                    <div class="toplist_songname">
                                        <a href="">慢半拍</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">薛之谦</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">2</div>
                                    <div class="toplist_songname">
                                        <a href="">我的朋友</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">TFBOYS</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">3</div>
                                    <div class="toplist_songname">
                                        <a href="">bad&nbsp;guy</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">Billie&#32;Eilish&#47;Justin&#32;Bieber</a>
                                    </div>
                                </li>                    
                            </ol>
                        </div>
                    </li>
                    <li class="item5">
                        <div class="toplist_box">
                            <div class="toplist_bg"></div>
                            <i class="mod_icon_play"></i>
                            <i class="toplist_line"></i>
                            <h3>
                                <i></i>
                                <a href="">流行指数</a>
                            </h3>
                            <ol>
                                <li class="toplist_song">
                                    <div class="toplist_number">1</div>
                                    <div class="toplist_songname">
                                        <a href="">慢半拍</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">薛之谦</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">2</div>
                                    <div class="toplist_songname">
                                        <a href="">我的朋友</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">TFBOYS</a>
                                    </div>
                                </li>
                                
                                <li class="toplist_song">
                                    <div class="toplist_number">3</div>
                                    <div class="toplist_songname">
                                        <a href="">bad&nbsp;guy</a>
                                    </div>
                                    <div class="toplist_artist">
                                        <a href="">Billie&#32;Eilish&#47;Justin&#32;Bieber</a>
                                    </div>
                                </li>                    
                            </ol>
                        </div>
                    </li>
                  


                </ul>
            </div>
        </div>

    </div>   
    
    <!-- MV -->
    <div class="mv j_mod">
        <div class="inner">
            <div class="mod-t">
                <h2>MV</h2>
            </div>
            <!-- 切换 -->
            <div class="mod-tab">
                <a class="current" href="">精选</a>
                <a href="">内地</a>
                <a href="">韩国</a>
                <a href="">港台</a>
                <a href="">欧美</a>
                <a href="">日本</a>
            </div>
            
            <div class="mod_slide">
                <div class="slide_list">
                    <ul>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                      
                    </ul>
                    <ul>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="playlist_item_box">
                                <div class="playlist_mv">
                                    <a href="">
                                        <img src="images/T015R640x360M101004BoY3o4Ji69e.jpg">
                                        <i class="mark_cover"></i>
                                        <i class="mark_icon_play"></i>
                                    </a>
                                    <h3>
                                        <span><a href="">慢半拍</a></span>
                                    </h3>
                                    <div class="playlist_author">
                                        <a href="">薛之谦</a>
                                    </div>
                                    <div class="playlist_other">
                                        <i></i>
                                        48.3万
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>                
                    
            <div class="slide_switch">
                <a href="javascript:;">
                    <i class="current"></i>
                </a>
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
        <div class="mod_slide_action">
            <div class="slide_action_left">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
            <div class="slide_action_right">
                <a href="javascript:;">
                    <i></i>
                </a>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="inner">
            <div class="footer_info">
                
                <div class="footer_download">
                    <h3>下载QQ音乐客户端</h3>
                    <ul>
                        <li class="footer_product_list__item--pic">
                            <a href="">
                                <i class="icon_qm_pc">
                                    <span>QQ音乐</span>
                                </i>PC版
                            </a>
                        </li>
                        <li class="footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_mac"><span>QQ音乐</span></i>Mac版</a>
                        </li>
                        <li class="footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_android"><span>QQ音乐</span></i>Android版</a>
                        </li>
                        <li class="footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_iphone"><span>QQ音乐</span></i>iPhone版</a>
                        </li>
                    </ul>
                </div>
    
                <div class="footer_product">
                    <h3>特色产品</h3>
                    <ul class="footer_product_list">
                        <li class="footer_product_list__item footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_kg"></i>全民K歌</a>
                        </li>
                        <li class="footer_product_list__item footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_ss"></i>Super Sound</a>
                        </li>
                        <li class="footer_product_list__item footer_product_list__item--pic">
                            <a href=""><i class="icon_qm_qp"></i>QPlay</a>
                        </li>
                        <li class="footer_product_list__item">
                            <a href="">车载互联</a>
                        </li>
                        <li class="footer_product_list__item">
                            <a href="">QQ演出</a>
                        </li>
                    </ul>
                </div>

                <div class="footer_group">
                        <h3>TME集团官网</h3>
                        <ul class="footer_group_list">
                            <li class="footer_platform_list__item">
                                <a href="">腾讯音乐</a>
                            </li>
                        </ul>
                </div>
    
                <div class="footer_link">
                    <h3>合作链接</h3>
                    <ul class="footer_link_list">
                        <li class="footer_link_list__item"><a href="">CJ ENM</a></li>
                        <li class="footer_link_list__item"><a href="">腾讯视频</a></li>
                        <li class="footer_link_list__item"><a href="">手机QQ空间</a></li>
                        <li class="footer_link_list__item"><a href="">最新版QQ</a></li>
                        <li class="footer_link_list__item"><a href="">腾讯社交广告</a></li>
                        <li class="footer_link_list__item"><a href="">电脑管家</a></li>
                        <li class="footer_link_list__item"><a href="">QQ浏览器</a></li>
                        <li class="footer_link_list__item"><a href="">腾讯微云</a></li>
                        <li class="footer_link_list__item"><a href="">腾讯云</a></li>
                        <li class="footer_link_list__item"><a href="">企鹅FM</a></li>
                        <li class="footer_link_list__item"><a href="">智能电视网</a></li>
                        <li class="footer_link_list__item"><a href="">当贝市场</a></li>
                     </ul>
                </div>

                <div class="footer_platform">
                        <h3>开放平台</h3>
                        <ul class="footer_platform_list">
                            <li class="footer_platform_list__item"><a href="">腾讯音乐人</a></li>
                            <li class="footer_platform_list__item"><a href="">音乐号认证</a></li>
                            
                     </ul>
                </div>

            </div>

            <div class="footer_copyright">
                <p>
                    <a href="" title="关于腾讯">关于腾讯</a> | 
                    <a href="" title="About Tencent">About Tencent</a> | 
                    <a href="" title="服务条款">服务条款</a> | 
                    <a href="" title="用户服务协议">用户服务协议</a> | 
                    <a href="" title="隐私政策">隐私政策</a> | 
                    <a href="" title="权利声明">权利声明</a> | 
                    <a href="" title="广告服务">广告服务</a> | 
                    <a href="" title="腾讯招聘">腾讯招聘</a> | 
                    <a href="" title="客服中心">客服中心</a> | 
                    <a href="" title="网站导航">网站导航</a>
                </p>
                <p>Copyright &copy; 1998 - <script type="text/javascript">document.write(new Date().getFullYear());</script> Tencent. 
                    <a href="" title="All Rights Reserved.">All Rights Reserved.</a></p>
                <p>腾讯公司 <a href="" title="版权所有">版权所有</a>
                    <a href="" title="腾讯网络文化经营许可证">腾讯网络文化经营许可证</a></p>
            </div>
        </div>
    </div>

    <a href="#" class="btn_bottom_to"><span>返回顶部</span></a>
    <a href="javascript:;" class="btn_bottom_feedback">反馈</a>
    <a href="javascript:;" class="btn_bottom_player"><span>播放器</span></a>
    <div class="popup_guide">
        <img src="images/logo.png" alt="">
        <p>千万高品质曲库尽享</p>
        <a href="">
            <i></i>客户端下载
        </a>
    </div>
</body>
</html>